<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="">
        <el-input size="small" v-model="formInline.userName" @input="inputs"  placeholder="输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="teacherData" ref="filterTable" highlight-current-row v-loading="loading"
      element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column sortable prop="teacher_name" label="教师姓名" width="150">
      </el-table-column>
      <el-table-column sortable prop="teacher_account" label="教师账号" width="150">
      </el-table-column>
      <el-table-column sortable prop="teacher_gender" label="教师性别" width="150">
      </el-table-column>
      <el-table-column sortable prop="teacher_telephone" label="电话" width="150">
      </el-table-column>
      <el-table-column sortable prop="teacher_email" label="邮箱" width="150">
      </el-table-column>
      <el-table-column sortable prop="teacher_class" label="任课班级" min-width="150">
      </el-table-column>
      <el-table-column label="操作" min-width="200">
        <template slot-scope="scope">  
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
        <el-form-item label="教师名称" prop="teacher_name">
          <el-input size="small" v-model="editForm.teacher_name" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="教师账号" prop="teacher_account">
          <el-input size="small" v-model="editForm.teacher_account" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="任课班级" prop="teacher_class">
          <el-select size="small" v-model="editForm.teacher_class" placeholder="请选择" class="userRole">
            <el-option label="石河子产业班" value="石河子产业班"></el-option>
            <el-option label="塔大产业版" value="塔大产业版"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // 导入请求方法
  import {
    userList,
    userInsert,
    userDelete,
    userUpdate,
    userSearch
  } from '@/api/user'

  import Pagination from '@/components/Pagination'
  export default {
    data() {
      return {
        list:[{
          teacher_name:'aaa',
          teacher_account:'sss',
          teacher_gender:'dd',
          teacher_telephone:'ss',
          teacher_email:'da',
          teacher_class:'da'
        },{
          teacher_name:'aaa',
          teacher_account:'sss',
          teacher_gender:'dd',
          teacher_telephone:'ss',
          teacher_email:'da',
          teacher_class:'da'
        },{
          teacher_name:'aaa',
          teacher_account:'sss',
          teacher_gender:'dd',
          teacher_telephone:'ss',
          teacher_email:'da',
          teacher_class:'da'
        },{
          teacher_name:'aaa',
          teacher_account:'sss',
          teacher_gender:'dd',
          teacher_telephone:'ss',
          teacher_email:'da',
          teacher_class:'da'
        },{
          teacher_name:'aaa',
          teacher_account:'sss',
          teacher_gender:'dd',
          teacher_telephone:'ss',
          teacher_email:'da',
          teacher_class:'da'
        },

        ],
        isS:false,
        loading: false, //是否显示加载
        title: '添加用户',
        editFormVisible: false, //控制编辑页面显示与隐藏
        // 编辑与添加form表单
        editForm: {
            teacher_name:'',
            teacher_account:'',
            teacher_class:'',
        },
        // 角色对象
        role: {
          roleId: '',
          roleName: ''
        },
        // rules表单验证
        rules: {
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          userRealName: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          roleId: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],
          userMobile: [{
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
              required: true,
              message: '请输入正确的手机号',
              trigger: 'blur'
            }
          ],
          userEmail: [{
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
              required: true,
              message: '请输入正确的邮箱',
              trigger: 'blur'
            }
          ],
          userSex: [{
            required: true,
            message: '请选择性别',
            trigger: 'blur'
          }]
        },
        // 搜索用参数
        formInline: {
          page: 1,
          limit: 10,
          userName: '',
        },
        //用户列表数据
        teacherData: [],
        teacherDatas:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        // 选中
        checkmenu: [],
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 18
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },

    /**
     * 数据发生改变
     */
    watch: {},


    created(){
      /*
       userList(
          {
            "pageNum":1,
            "pageSize":100}
          ).then(res => {
           this.loading = false
           if (res.success == false) {
             this.$message({
               type: 'info',
               message: res.msg
             })
           } else {
            // console.log(res.data.list[0].userId)
             this.teacherDatas = res.data.list
             this.pageparm.total = res.data.total
             console.log(this.pageparm.total)
            // this.formInline.page = this.pageparm.currentPage
            //console.log(parameter.pageSize)
             // 分页赋值
             //this.pageparm.currentPage = this.formInline.page
             //this.pageparm.pageSize = this.formInline.limit
             //this.pageparm.total = res.count
             //console.log(this.teacherData[0].userId)
           }
         })*/
             this.teacherDatas = this.list
             this.pageparm.total = 5
      },

    /**
     * 使用api获得userList
     */
    mounted() {
      this.getdata(this.pageparm)
    },

    //输入框中input值改变时出发
   

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      
      // 获取数据方法
      getdata(parameter) {
        this.loading = true
        //console.log(this.isS)
        // 模拟数据开始 -> 使用ajax获得真实数据
       /* let res = {
          code: 0,
          msg: null,
          count: 12,
          data: [{
              userId: '1',
              userName: 'admin',
              password: '123456',
              roleId: '1',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '2',
              userName: 'david',
              password: '123456',
              roleId: '2',
              roleName: '管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '3',
              userName: 'admin',
              password: '123456',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '4',
              userName: 'admin',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '5',
              userName: 'admin',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '6',
              userName: 'admin',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '7',
              userName: 'admin',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '8',
              userName: 'admin',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '9',
              userName: 'admin',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            },
            {
              userId: '10',
              userName: 'admin',
              roleName: '超级管理员',
              createTime: '2022-06-13 17:18:06',
              email: '111@qq.com',
            }
          ]
        }
        this.loading = false,
        this.teacherData = res.data,
        // 分页赋值
        this.pageparm.currentPage = this.formInline.page,
        this.pageparm.pageSize = this.formInline.limit,
        this.pageparm.total = res.count
        // 模拟数据结束
*/
        /***
         * 调用接口，注释上面模拟数据 取消下面注释
         */
         //获取用户列表
        console.log(this.pageparm.total)
        if(this.isS==false){/*
          userList(
            {
              "pageNum":parameter.currentPage,
              "pageSize":parameter.pageSize}
            ).then(res => { 
            this.loading = false
            if (res.success == false) {
              this.$message({
                type: 'info',
                message: res.msg
              })
            } else {
              // console.log(res.data.list[0].userId)
              this.teacherData = res.data.list
              //this.formInline.page = this.pageparm.currentPage
              //console.log(parameter.pageSize)
              // 分页赋值
              //this.pageparm.currentPage = this.formInline.page
              //this.pageparm.pageSize = this.formInline.limit
              //this.pageparm.total = res.count
              //console.log(this.teacherData[0].userId)
            }})
        */
             this.loading = false,
              this.teacherData = this.list
        
       }else{
        /*
          userSearch({
            "pageNum":1,
            "pageSize":this.pageparm.total,
            "userName":this.formInline.userName
          }).then(res=>{
            this.loading = false,
            this.teacherData=res.data.list;
          })*/
         }
      },

        inputs(){
          if(this.formInline.userName != ''){
            this.isS=true;
            this.getdata('')
          }else{
            this.isS=false;
            this.getdata(this.pageparm)
          }
          console.log(this.isS)
        },

           // 分页插件事件
      callFather(parm) {
        this.pageparm.currentPage = parm.currentPage
        this.pageparm.pageSize = parm.pageSize
        this.formInline.page=parm.currentPage
        this.formInline.limit=parm.pageSize
        
        this.getdata(this.pageparm)
      },
      //搜索事件->[暂时不做]
      search() {
        this.getdata(this.formInline)
      },
      // 选择复选框事件
      selectChange(val) {
        this.selectdata = val
      },
      //显示编辑界面
      handleEdit: function (index, row) {
        this.editFormVisible = true
        if (row != undefined && row != 'undefined') {
          this.title = '修改',
          /*
          this.editForm.userId = row.userId
          this.editForm.userName = row.userName
          this.editForm.password = row.password
          this.editForm.roleId = row.roleId
          this.editForm.roleName = row.roleName
          this.editForm.email = row.email
        */
            this.editForm.teacher_name=row.teacher_name,
            this.editForm.teacher_account=row.teacher_account,
            this.editForm.teacher_class=row.teacher_class
        } else {
            this.title = '添加'
            this.editForm.teacher_name='',
            this.editForm.teacher_account='',
            this.editForm.teacher_class=''
        }
      },
      // 编辑、添加提交方法
      submitForm(editData) {
        this.$refs[editData].validate(valid => {
          //判断userId决定调用userInsert还是userUpdate
          //console.log(editData)
          if(this.title=='修改用户'){
            /*
            userUpdate(
              {
                "userId":this.editForm.userId,
                "userName":this.editForm.userName,
                "roleName":this.editForm.roleName,
                "roleId":this.editForm.roleId,
                "password":this.editForm.password,
                "email":this.editForm.email,
                //"createTime":new Date().toLocaleDateString()
              }
            ).then(res=>{
              if(res.message=='success'){
                this.isS=false;
                this.formInline.userName=''
                this.getdata(this.pageparm)
                this.closeDialog('edit');
                //alert("修改成功")
                this.$message({
                  type: 'info',
                  message: '修改成功'
                })
              }else{
                //alert('修改失败')
                this.$message({
                  type: 'info',
                  message: '修改失败'
                })
                this.closeDialog('edit');
              }
            })
          */
          }else if(this.title=='添加用户'){
            /*
              //alert("添加用户")
              //this.closeDialog('insert');
              
             if(this.editForm.userName==''&&this.editForm.roleName==''){
                //alert("用户名,角色名不能为空")
                this.$message({
                type: 'info',
                message: '用户名,角色名不能为空'
            })
             }else{
             
             userInsert({
                //"userId":this.editForm.userId,
                "userName":this.editForm.userName,
                "roleName":this.editForm.roleName,
                "roleId":this.editForm.roleId,
                "password":this.editForm.password,
                "email":this.editForm.email,
                //"createTime":new Date().toLocaleDateString()
              }).then(res=>{
                this.pageparm.total+=1;
                this.isS=false;
                this.formInline.userName=''
                this.getdata(this.pageparm)
                //alert("成功添加第" + this.pageparm.total + "个成员")
                const i = this.pageparm.total
                    this.$message({
                      type: 'info',
                        message: "成功添加第" + i + "个成员"
                    })
                this.closeDialog('insert');
              })
             }*/
          }
        })
      },
      // 关闭编辑、增加弹出框
      closeDialog(dialog) {
        if (dialog == 'edit') {
          this.editFormVisible = false
        }
        if(dialog == 'insert'){
          this.editFormVisible = false
        }
      },
      //查询用户
      search(row){
       // console.log(row.userName)
        /*
        userSearch({
            "pageNum":this.pageparm.currentPage,
            "pageSize":this.pageparm.pageSize,
            "userName":row.userName
          }).then(res=>{
             this.userId = res.data.list[0].userId;
             //console.log(this.userId)
             //console.log(res.data.list[0].userId)
            }
          )*/
      },
      // 删除用户
      deleteUser(index, row) {
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
       /*
       //调用userDelete
        var userId = 0;
        var last = this.pageparm.total/this.pageparm.pageSize;
        if(this.pageparm.currentPage==last){
        for(var i=0; i<this.pageparm.pageSize; i++){
          if(this.teacherData[i].userName == row.userName && this.teacherData[i].password == row.password){
              userId = this.teacherData[i].userId
          }
        }}else{
         var yu = this.pageparm.total%this.pageparm.pageSize;
         for(var i=0; i<yu; i++){
          if(this.teacherData[i].userName == row.userName && this.teacherData[i].password == row.password){
              userId = this.teacherData[i].userId
          }
        } 
        }
        userDelete({
            "userId":userId
          }).then(res=>{
            if(res.message == 'success'){
              this.pageparm.total--;
              //alert("删除成功！")
              this.$message({
                      type: 'info',
                        message:"删除成功！"
                    })
                this.closeDialog('insert');
              this.isS=false;
              this.formInline.userName=''
              this.getdata(this.pageparm)
            }
          })*/
        })
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
    display: flex;
  }

  .el-table .cell{
    display: flex;
  }

  .userRole {
    width: 100%;
  }
</style>